<template>
  <div class="line-info">
    <headers></headers>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 图片轮播和基本信息 -->
      <div class="info-container">
        <div class="carousel-section">
          <el-carousel height="500px" indicator-position="outside">
            <el-carousel-item v-for="(item,index) in info.images.split(',')" :key="index">
              <img :src="item" alt="线路图片">
            </el-carousel-item>
          </el-carousel>
        </div>
        
        <div class="info-section">
          <div class="title-section">
            <h1 class="line-name">{{info.name}}</h1>
            <div class="favorite-btn">
              <el-button 
                v-if="!flag" 
                type="success" 
                icon="el-icon-star-off" 
                circle 
                @click="saveSysFavor">
              </el-button>
              <el-button 
                v-if="flag" 
                type="warning" 
                icon="el-icon-star-on" 
                circle 
                @click="removeSysFavor">
              </el-button>
            </div>
          </div>

          <div class="line-meta">
            <div class="meta-item" v-if="info.geography">
              <i class="el-icon-location"></i>
              <span>{{info.geography}}</span>
            </div>
            <div class="meta-item" v-if="info.temperature">
              <i class="el-icon-sunny"></i>
              <span>{{info.temperature}}</span>
            </div>
            <div class="meta-item" v-if="info.days">
              <i class="el-icon-time"></i>
              <span>{{info.days}}天</span>
            </div>
          </div>
          
          <div class="description">{{info.introduce}}</div>
        </div>
      </div>

      <!-- 详细信息卡片 -->
      <div class="details-card">
        <el-card>
          <div class="detail-section">
            <h3><i class="el-icon-guide"></i> 行程安排</h3>
            <div class="itinerary" v-if="info.content" v-html="info.content"></div>
          </div>
        </el-card>
        </div>
    </div>

    <bottoms></bottoms>
  </div>
</template>

<script>
  import {getSysLineById,getSysFavor,saveSysFavor,removeSysFavor} from '../../api/api'
  import headers from '@/components/header'
  import bottoms from '@/components/bottom'
  export default {
    name: 'LineInfo',
    components: {
      headers,
      bottoms
    },
    data() {
      return {
        id: "",
        info: {
          content: "",
          name: ""
        },
        favor: {},
        flag: false,
      }
    },
    methods: {
      removeSysFavor(id) {
        removeSysFavor({ids: this.favor.id}).then(res => {
          if (res.code == 1000) {
            this.$message({
              message: '取消收藏成功',
              type: 'success'
            });
            this.getSysFavor()
          }
        })
      },
      saveSysFavor() {
        var param = {
          lineId: this.id
        }
        saveSysFavor(param).then(res => {
          if (res.code == 1000) {
            this.$message({
                message: '收藏成功',
                type: 'success'
            });
            this.getSysFavor()
          }
        })
      },
      getSysLineById() {
        getSysLineById({id: this.id}).then(res => {
          if (res.code == 1000) {
            this.info = res.data
          }
        })
      },
      getSysFavor() {
        getSysFavor({id:this.id}).then(res => {
          if (res.code == 1000) {
            this.favor = res.data
            this.flag = true
          } else {
            this.flag = false
          }
        })
      },
    },
    mounted() {
      this.id = this.$route.query.id
      this.getSysFavor()
      this.getSysLineById()
    }
 }
</script>

<style scoped>
.line-info {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 轮播图和基本信息布局 */
.info-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 30px;
  margin-bottom: 30px;
}

.carousel-section {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.carousel-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 基本信息样式 */
.info-section {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.line-name {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.favorite-btn {
  display: flex;
  gap: 10px;
}

.line-meta {
  margin: 20px 0;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #606266;
}

.meta-item i {
  color: #409EFF;
}

.description {
  color: #606266;
  line-height: 1.6;
  margin: 20px 0;
}

/* 详细信息卡片样式 */
.details-card {
  margin-bottom: 40px;
}

.detail-section {
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
}

.detail-section:last-child {
  border-bottom: none;
}

.detail-section h3 {
  color: #303133;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.itinerary {
  color: #606266;
  line-height: 1.8;
}

.itinerary :deep(p) {
  margin: 10px 0;
}

.itinerary :deep(strong) {
  color: #303133;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .info-container {
    grid-template-columns: 1fr;
  }
  
  .info-section {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 10px;
  }
  
  .title-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .favorite-btn {
    align-self: flex-end;
  }
  }
</style>